<template>
  <div style="width: 100%; height: 100%">
    <el-menu
      :default-active="index.toString()"
      mode="horizontal"
      background-color="#e5e9f2"
      active-text-color="#000"
      @select="handleSelect">
      <el-menu-item index="0">
        日报
      </el-menu-item>
      <el-menu-item index="1">
        周报
      </el-menu-item>
      <el-menu-item index="2">
        月报
      </el-menu-item>
      <el-menu-item index="3">
        每日日常工作
      </el-menu-item>
      <el-menu-item index="4">
        临时工作提醒
      </el-menu-item>
    </el-menu>
    <div v-if="index!==4" class="tableContainer">
      <notice-grid :index="index"></notice-grid>
    </div>
    <div v-else class="tableContainer">
      <temp-notice-grid/>
    </div>
  </div>
</template>

<script>
import noticeGrid from './component/noticeGrid'
import tempNoticeGrid from './component/tempNoticeGrid'
export default {
  name: 'index',
  inject: ['reload'],
  components: {
    noticeGrid,
    tempNoticeGrid
  },
  data () {
    return {
      index: 0
    }
  },
  methods: {
    handleSelect (key) {
      this.index = parseInt(key)
    }
  },
  beforeMount () {
    this.index = this.$route.params.index ? parseInt(this.$route.params.index) : this.index
  }
}
</script>

<style scoped>
  .el-menu {
    width: 100%;
    border: 0;
  }
  .el-menu-item {
    width: 20%;
    text-align: center;
    font-size: 1.6em;
    color: white;
  }
  .tableContainer {
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
</style>
